<template>
	<div class="InsuranceList">
		<ul>
			<li v-for='(item,index) in data' :key='index'>
				<router-link :to='"insuranceList/InsuranceDetails/"+item.id'>
					<img :src='item.img' alt="" class="leftImg">
					<div class="r">
						<h3>
							<span v-if='item.recommend' class="recommend">推荐</span>
							{{item.title}}
						</h3>
						<ul class="tag">
							<li v-for='(v,i) in item.label' :key='i'>{{v}}</li>
						</ul>
						<div class="price">
							<span>{{item.price}}</span>
							元起
						</div>
					</div>
				</router-link>
			</li>
		</ul>
		<transition name='breadcrumb'>
		<router-view></router-view>
		</transition>
	</div>
</template>

<script>
/*
* img       : 图片地址
* recommend : 是否推荐
* title     : 标题
* label     : 标签
* price     : 价格
* id        : id
*/
var data = [
    {
        id:1,
        img:'http://p3.wmpic.me/article/2016/01/02/1451705414_FCsmpfEP.jpg',
        recommend:true,
        title:'天佑车辆意外险',
        label:['保全中国地区','交通','自驾','不限次数'],
        price:219.00
    },
    {
        id:2,
        img:'http://p3.wmpic.me/article/2016/01/02/1451705414_FCsmpfEP.jpg',
        recommend:false,
        title:'天佑车辆意外险',
        label:['保全中国地区','交通','自驾','不限次数'],
        price:219.00
    },
    {
        id:3,
        img:'http://p3.wmpic.me/article/2016/01/02/1451705414_FCsmpfEP.jpg',
        recommend:true,
        title:'天佑车辆意外险',
        label:['保全中国地区','交通','自驾','不限次数'],
        price:219.00
    },
    {
        id:4,
        img:'http://p3.wmpic.me/article/2016/01/02/1451705414_FCsmpfEP.jpg',
        recommend:true,
        title:'天佑车辆意外险',
        label:['保全中国地区','交通','自驾','不限次数'],
        price:219.00
    }
]
export default {
  name: 'InsuranceList',
  data () {
    return {
        data:data
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='scss'>
.InsuranceList{width:100%;position: fixed;left:0;top:0;width:100%;height:100%;z-index:101;overflow-y: auto;background-color:#f5f5f5;
	> ul{background-color: white;}
    li + li a{border-top:1px solid #f5f5f5;}
    > li{background-color: white;padding:0 15px;}
    ul ul li{border: none;}
    a{display: block;position: relative;padding:15px 0;}
    .leftImg{width: 110px;height: 82px;vertical-align: middle;}
    .r{position: absolute;left:120px;top:0;height: 100%;
        h3{font-size:16px;font-weight: normal;padding-top:15px;
            span{font-size: 12px;background-color: #F02B2B;color:white;border-radius: 2px;padding:3px 4px;}
        }
        .tag{height: 12px;overflow: hidden;margin-top:5px;
             li{display: inline-block;font-size: 12px;line-height: 1;vertical-align: top;color:#ACACAC;}
             li:first-child{margin-right:5px;}
             li + li{padding:0 5px;border-left:1px solid #e6e6e6;}
        }
        .price{color:#F96268;font-size:12px;position: absolute;left:0;bottom:15px;;
            span{font-size:17px;font-weight: bold;}
        }
    }
}
</style>
